<template>
  <div class="products-container page-view">
    <div class="products-header header-section">
      <h1 class="page-title">
        <i class="bi bi-box me-2"></i>
        产品管理
      </h1>
      <p class="page-subtitle">管理商品信息和库存</p>
    </div>

    <div class="products-content">
      <!-- 操作栏（Element Plus） -->
      <div class="header-section">
        <div class="search-section">
          <el-input v-model="searchQuery" placeholder="搜索产品名称或编号..." clearable class="w-300 mr-16">
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>

          <el-select v-model="selectedCategory" placeholder="全部分类" clearable class="w-150 mr-16">
            <el-option label="全部分类" value="" />
            <el-option label="电子产品" value="electronics" />
            <el-option label="服装" value="clothing" />
            <el-option label="图书" value="books" />
            <el-option label="家居" value="home" />
          </el-select>
        </div>

        <el-button type="primary" :icon="Plus" @click="showCreateDialog = true">添加产品</el-button>
      </div>

      <!-- 产品列表（Element Plus） -->
      <el-card class="table-card">
        <el-table :data="displayedProducts" stripe style="width: 100%" empty-text="暂无数据">
          <el-table-column label="产品图片" width="100" align="center">
            <template #default="{ row }">
              <el-image :src="row.image" :alt="row.name" style="width: 60px; height: 60px" fit="cover" />
            </template>
          </el-table-column>

          <el-table-column label="产品名称" min-width="200">
            <template #default="{ row }">
              <div class="product-info">
                <div class="product-name">{{ row.name }}</div>
                <div class="product-sku">
                  <el-text type="info" size="small">SKU: {{ row.sku }}</el-text>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="分类" width="120" align="center">
            <template #default="{ row }">
              <el-tag type="info" size="small">{{ row.category }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="价格" width="120" align="center">
            <template #default="{ row }">
              <el-text type="primary">¥{{ row.price }}</el-text>
            </template>
          </el-table-column>

          <el-table-column label="库存" width="100" align="center">
            <template #default="{ row }">
              <el-text :type="row.stock < 10 ? 'danger' : row.stock < 50 ? 'warning' : 'success'">{{
                row.stock
              }}</el-text>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="small">
                {{ row.status === "active" ? "上架" : "下架" }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" width="160" align="center">
            <template #default="{ row }">
              {{ formatDate(row.createdAt) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click="editProduct(row)">编辑</el-button>
              <el-button size="small" @click="viewProduct(row)">查看</el-button>
              <el-button size="small" type="danger" @click="deleteProduct(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页（Element Plus） -->
        <div class="pagination-section">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 创建产品对话框（Element Plus） -->
    <el-dialog v-model="showCreateDialog" title="添加产品" width="600px">
      <el-text type="info">产品创建功能开发中...</el-text>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { Plus, Search } from "@element-plus/icons-vue";

defineOptions({
  name: "ProductsView",
});

// 响应式数据
const searchQuery = ref("");
const selectedCategory = ref("");
const showCreateDialog = ref(false);

// 模拟产品数据
const products = ref([
  {
    id: 1,
    name: "iPhone 15 Pro",
    sku: "IP15P001",
    category: "电子产品",
    price: "7999.00",
    stock: 25,
    status: "active",
    image: "https://via.placeholder.com/60x60?text=iPhone",
    createdAt: "2024-01-15T10:30:00Z",
  },
  {
    id: 2,
    name: "MacBook Air M2",
    sku: "MBA001",
    category: "电子产品",
    price: "8999.00",
    stock: 8,
    status: "active",
    image: "https://via.placeholder.com/60x60?text=MacBook",
    createdAt: "2024-01-14T14:20:00Z",
  },
  {
    id: 3,
    name: "Nike Air Max",
    sku: "NAM001",
    category: "服装",
    price: "899.00",
    stock: 120,
    status: "active",
    image: "https://via.placeholder.com/60x60?text=Nike",
    createdAt: "2024-01-13T09:15:00Z",
  },
  {
    id: 4,
    name: "《Vue.js 设计与实现》",
    sku: "VUE001",
    category: "图书",
    price: "89.00",
    stock: 45,
    status: "inactive",
    image: "https://via.placeholder.com/60x60?text=Book",
    createdAt: "2024-01-12T16:45:00Z",
  },
]);

// 计算属性
const filteredProducts = computed(() => {
  return products.value.filter((product) => {
    const matchesSearch =
      product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      product.sku.toLowerCase().includes(searchQuery.value.toLowerCase());
    const matchesCategory = !selectedCategory.value || product.category === selectedCategory.value;
    return matchesSearch && matchesCategory;
  });
});

// 本地分页状态
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0,
});

// 当前页数据
const displayedProducts = computed(() => {
  const start = (pagination.value.page - 1) * pagination.value.pageSize;
  return filteredProducts.value.slice(start, start + pagination.value.pageSize);
});

// 监听过滤结果，更新总数并在筛选时重置到第一页
watch(filteredProducts, (list) => {
  pagination.value.total = list.length;
  pagination.value.page = 1;
});

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.page = 1;
};

const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
};

// 方法
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString("zh-CN");
};

const editProduct = (product: any) => {
  console.log("编辑产品:", product);
};

const viewProduct = (product: any) => {
  console.log("查看产品详情:", product);
};

const deleteProduct = (id: number) => {
  if (confirm("确定要删除这个产品吗？")) {
    products.value = products.value.filter((p) => p.id !== id);
  }
};

onMounted(() => {
  console.log("产品管理页面加载完成");
});
</script>

<style scoped>
.products-container {
  padding: 2rem;
  background-color: #f8f9fc;
  min-height: 100vh;
}

.products-header {
  margin-bottom: 2rem;
}

.page-title {
  color: #5a5c69;
  font-size: 1.75rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  color: #858796;
  margin-bottom: 0;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.375rem;
}

.product-info {
  min-width: 200px;
}

.product-name {
  font-weight: 600;
  color: #5a5c69;
}

.product-sku {
  font-size: 0.8rem;
}

.card {
  border: none;
  border-radius: 0.35rem;
}

.shadow {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.modal.show {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn-group .btn {
  margin-right: 0.25rem;
}

.btn-group .btn:last-child {
  margin-right: 0;
}
</style>
